<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" 
				class="bg" />
			
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/signin-title.png`" 
				style="width: 100%;height: 556rpx;"
				class="bg" />
			
			<comDetailNavigateBack title="签到活动" />
			
			<view class="fixed signin-page">
				
				<view class="signin-box-top relative flex">
					<image style="top: 0rpx;" class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/signin/calendar-top-bg.png`" mode=""></image>
					
					<view class="box-top-left relative flex-all-center">
						<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/signin/signin-day.png`" mode=""></image>
							
						<view class="top-left-num font-hanserif-bold relative">{{ totalUserSigninNum }}</view>
						
						<view class="top-left-text absolute text-nowrap">累计天数</view>
					</view>
					
					<view class="box-top-right flex-full">
						<view class="top-right-content flex">
							<view class="progress-content relative" v-for="(item,index) in totalSigninConfigList" :key="index" @click="item.reward_status === 1 ? setGotAwardFun(item.condition_num, index) : setAwardPreviewFun(item.condition_num, index)">
								<view class="progress-img relative flex-all-center">
									<view class="progress-line absolute" v-if="index!=0">
										<view class="progress-num absolute" :style="{width: numCalculation(item.leftNum, item.rightNum) * 100 + '%'}"></view>
									</view>

									<image class="bg active" v-if="item.reward_status === 2"
										style="width: 70rpx;height: 86rpx;left: 6rpx;top: -12rpx;"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/chest-open.png`"
										mode=""></image>
										
									<image class="bg active chest-active" v-else-if="item.reward_status === 1"
										style="width: 123rpx;height: 121rpx;"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/chest-active.png`"
										mode=""></image>
										
									<image class="bg" v-else-if="item.reward_status === 0"
										style="width: 64rpx;height: 58rpx;left: 12rpx;top: 12rpx;"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/chest.png`"
										mode=""></image>
										
									<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_status === 1" class="receive-icon absolute" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/receive-bg-icon.png`" mode=""></image>
								</view>
								
								<view class="progress-day-txt">
									<text>累计</text>
									<text class="progress-day-num">{{ item.condition_num }}</text>天
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="calendar-view relative">
					<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/signin/signin-calendar-bg.png`" mode=""></image>
					
					<view class="calendar-content absolute">
						<view class="calendar-item relative flex-all-center"
							:class="[item.status === 2 ? 'received' : '', (item.status === 0 && Number(item.day) < currentDate)? 'disbaled' : '']"
							v-for="(item,index) in userSigninList" :key="index">
							
							<!-- status  0=未签到1=可签到,2=已签到 -->
							<!-- 未签到-已过去 -->
							<image class="bg" v-if="item.status === 0 && Number(item.day) < currentDate"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/calendar-item-signed-out.png`"
								mode=""></image>
							<!-- 已签到 -->
							<image class="bg" v-else-if="item.status === 2"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/calendar-item-signed-in.png`"
								mode=""></image>
							<!-- 可签到 -->
							<image class="bg active" v-else-if="item.status === 1"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/calendar-item-signing.png`"
								mode=""></image>
							<!-- 未签到-未来 -->
							<image class="bg" v-else-if="item.status === 0"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/calendar-item-signed-in.png`"
								mode=""></image>
								
							<view class="calendar-day absolute" :class="[item.status === 1 ? 'now-day': '']">
								第<text class="num">{{item.day}}</text>天
							</view>
							<view class="calendar-award-icon absolute flex-all-center">
								<image class="img" :src="item.balance_img_url" mode="heightFix"></image>
							</view>
							<view class="calendar-award-num absolute">{{item.value}}{{ unit }}</view>
							<image class="tick relative" v-if="item.status === 2"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/tick.png`" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="calendar-signin-btn relative">
					<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/signin/bottom-box-view-bg.png`" mode=""></image>
					
					<view class="signin-btn-footer flex-justify-content-between flex-align-items-center relative">
						<view class="signin-btn-footer-left">{{ signinCondition ? '已达到签到标准' : signinConditionDesc }}</view>
						<view class="signin-btn-footer-right relative flex-all-center font-hanserif-bold" :class="[isOpenSign ? '' : 'grayscale-disbaled']" @click="setSiginFun">
							<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/signin/signin-btn.png`" mode=""></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 宝箱弹框 -->
			<view class="model-mask" v-if="awardPreviewDialog" :zoom="true" @click="awardPreviewDialog = false">
				<view class="award-preview-box absolute-center" @click.stop="awardPreviewDialog = true">
					<image class="bg award-preview-bg"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/treasure-bg.png`" mode=""></image>
					
					<view class="award-img absolute flex flex-justify-content-center">
						<view class="award-img-item flex-direction-column flex-align-items-center" v-for="(item, index) in awardPreviewList" :key="index">
							<view class="award-img-img relative flex-direction-column flex-all-center">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/treasure-good-bg.png`"
									mode=""></image>
								<image class="img relative" :src="item.item_cover" mode="heightFix"></image>
							</view>
							<view class="award-img-text truncate font-hanserif-bold relative flex-all-center">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/treasure-num-bg.png`"
									mode=""></image>
								
								<view class="relative">
									{{item.item_name}}
									<text class="num">X{{item.num}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="award-preview-btn absolute flex-all-center font-hanserif-bold" @click.stop="awardPreviewDialog = false">
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/treasure-btn.png`" mode="">
						</image>
					</view>
				</view>
			</view>
			
			<!-- 领取弹框 -->
			<view class="model-mask" v-if="awardDialog" :zoom="true" @click="awardDialog = false">
				<view class="award-box absolute-center" @click.stop="awardDialog = true">
					<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/signin/signin-received-bg.png`"
						mode=""></image>
						
					<view class="award-img absolute flex" :class="awardList.length > 3 ? '' :  'flex-justify-content-center'">
						<view class="award-img-item flex-direction-column flex-align-items-center" v-for="(item, index) in awardList" :key="index">
							<view class="award-img-img relative flex-direction-column flex-all-center">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/treasure-good-bg.png`"
									mode=""></image>
								<image class="img relative" :src="item.item_cover" mode="heightFix"></image>
							</view>
							<view class="award-img-text truncate font-hanserif-bold relative flex-all-center">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/treasure-num-bg.png`"
									mode=""></image>
								
								<view class="relative">
									{{item.item_name}}
									<text class="num">X{{item.num}}666666</text>
								</view>
							</view>
						</view>
					</view>
				
					<view class="award-preview-btn absolute flex-all-center font-hanserif-bold" @click.stop="awardDialog = false">
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/signin/treasure-btn.png`" mode="">
						</image>
					</view>
				</view>
			</view>
			
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store';
	
	import { getSigninDoneApi, getSigninHomeApi, getSigninTotalRewardApi, getSigninTotalRewardListApi } from '@/setupproject/INTERFACE';
	
	import {
		setParseFunTime
	} from '@/setupproject/TOOLS_FUN';

	export default {
		name: 'signInPage',
		data() {
			return {
				unit: '',  //单位
				totalSigninConfigList: [], //签到列表
				signinCondition: 0, //满足签到条件
				totalUserSigninNum: 0,// 累计签到数
				
				currentDate: 1,
				isOpenSign: 0, //可签到
				signinConditionDesc: '', // 签到条件提示语
				
				userSigninList: [], //累计签到列表
				awardPreviewDialog: false, // 宝箱弹框
				
				awardDialog: false, // 领取弹框
				awardPreviewList: [],
				awardList: [],
				
			};
		},
		onLoad() {
			this.getCalendarFun();
			this.currentDate = new Date().getDate();
		},
		computed: {
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		methods: {
			async setGotAwardFun(condition_num, index){
				const {
					code,
					msg,
					data,
				} = await getSigninTotalRewardApi({
					condition_num
				});
				
				if(code === 200){
					this.totalSigninConfigList[index].reward_status = 2;
					this.awardList = data;
					this.awardDialog = true;
				} 
				
				uni.showToast({
					icon: code === 200 ? 'success' : 'none',
					title: data || msg,
				})
			},
			
			async setAwardPreviewFun(condition_num, index){
				const {
					code,
					msg,
					data,
				} = await getSigninTotalRewardListApi({
					condition_num
				});
				
				if(code === 200){
					this.awardPreviewList = data;
					this.awardPreviewDialog = true;
				} 
				
				uni.showToast({
					icon: code === 200 ? 'success' : 'none',
					title: data || msg,
				})
			},
			
			getMonthDaysFun(date) {
				let arr = date.split('-');
				return new Date(arr[0], arr[1], 0).getDate();
			},
			
			async getCalendarFun(date) {
				let start_date, end_date;
				if (date) {
					let res = this.getMonthDaysFun(date);
					start_date = date + '-01';
					end_date = date + '-' + res;
				} else {
					let res = this.getMonthDaysFun(setParseFunTime(new Date(), 'YYYY-mm'))
					start_date = setParseFunTime(new Date(), 'YYYY-mm') + '-01';
					end_date = setParseFunTime(new Date(), 'YYYY-mm') + '-' + res;
				}

				const {
					code,
					msg,
					data,
				} = await getSigninHomeApi({
					start_date,
					end_date
				});

				if (code !== 200) {
					return uni.showToast({
						icon: "none",
						title: data || msg,
					})
				}
				
				this.signinCondition = data.signin_condition; // 满足签到条件
				this.signinConditionDesc = data.signin_condition_desc; // 签到条件
				this.isOpenSign = data.is_open_sign; // 可签到
				this.unit = data.unit; // 单位
				this.userSigninList = data.user_sign_in_list; // 签到列表
				this.totalSigninConfigList = data.total_sign_in_config_list; // 累计签到列表
				this.totalUserSigninNum = data.total_user_sign_in_num; // 累计签到数
				
				this.totalSigninConfigList.map(((item, index) => {
					if(index > 0 && this.totalSigninConfigList.length > index+1) {
						this.totalSigninConfigList[index].leftNum = this.totalUserSigninNum - this.totalSigninConfigList[index-1].condition_num ? this.totalUserSigninNum - this.totalSigninConfigList[index-1].condition_num : 0 ;
						this.totalSigninConfigList[index].rightNum = this.totalSigninConfigList[index].condition_num - this.totalSigninConfigList[index-1].condition_num;
					}
				}))
			},
			
			async setSiginFun(){
				const {
					code,
					msg,
					data,
				} = await getSigninDoneApi();
				
				if(code === 200){
					this.isOpenSign = 0;
					this.getCalendarFun();
				}
				
				uni.showToast({
					icon: code === 200 ? 'success' : 'none',
					title: msg,
				})
			},
			
			numCalculation(nums, sums) {
				let res = 0;
				if (sums == 0) {
					res = 1;
				} else {
					res = nums / sums > 1 ? 1 : nums / sums;
				}
				return res;
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.signin-page {
		font-size: 32rpx;
		color: #fff;
		bottom: 0;
		height: 1206rpx;
		
		.signin-box-top {
			left: 0;
			right: 0;
			margin: auto;
			width: 750rpx;
			height: 182rpx;
			padding: 0 20rpx;
			background: rgba(143, 79, 255, 0.2);
			backdrop-filter: blur(14rpx);
			-webkit-backdrop-filter: blur(14rpx); /* Safari */
			.box-top-left {
				width: 72rpx;
				height: 92rpx;
				margin: 20rpx 20rpx;
		
				.top-left-text {
					color: #FFFFFF;
					font-size: 24rpx;
					bottom: -24rpx;
				}
		
				.top-left-num {
					font-size: 28rpx;
					font-weight: bold;
					color: #FFF;
					margin-top: -10rpx;
				}
			}
		
			.box-top-right {
				margin-left: 20rpx;
				height: 100%;
				overflow-x: auto;
				margin-top: 34rpx;
				.top-right-content {
					.progress-content {
						width: 92rpx;
						text-align: center;
		
						.progress-img {
							margin-top: 4rpx;
							width: 92rpx;
							height: 92rpx;
		
							.progress-line {
								right: 70rpx;
								top: 40rpx;
								width: 120rpx;
								height: 15rpx;
								background: #BB8AFF;
								.progress-num {
									left: 0;
									top: 0;
									max-width: 100%;
									height: 15rpx;
									background: #79F6FF;
								}
							}
		
							.bg {
								z-index: 100;
							}
		
							.active {
								left: 0rpx;
								top: -6rpx;
								width: 128rpx;
								height: 128rpx;
							}
							
							.chest-active {
								left: -18rpx;
								top: -26rpx;
								width: 128rpx;
								height: 128rpx;
							}
							
							.receive-icon {
								top: 0rpx;
								right: -44rpx;
								z-index: 100;
								width: 73rpx;
								height: 20rpx;
							}
						}
		
						.progress-day-txt {
							position: absolute;
							bottom: 0;
							left: 4rpx;
							bottom: -6rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							white-space: nowrap;
							.progress-day-num {
								font-weight: bold;
								color: #63FFF7;
							}
						}
					}
		
					.progress-content+.progress-content {
						margin-left: 70rpx;
					}
				}
			}
		}
		

		.calendar-view {
			width: 750rpx;
			height: 910rpx;
			font-size: 20rpx;
			color: #fff;
			top: -20rpx;
			.calendar-content {
				left: 0;
				right: 0;
				top: 46rpx;
				margin: auto;
				width: 710rpx;
				height: 780rpx;
				overflow-y: auto;

				.calendar-item {
					width: 134rpx;
					height: 169rpx;
					text-align: center;
					float: left;
					margin-bottom: 18rpx;

					.tick {
						width: 93rpx;
						height: 93rpx;
						display: none;
					}

					&.received {
						&::after {
							content: '';
							width: 100%;
							height: 100%;
							position: absolute;
							z-index: 1;
							left: 0;
							top: 0;
							background: #000;
							opacity: 0.5;
							border-radius: 12rpx;
						}

						.tick {
							z-index: 2;
							display: block;
						}
					}
					&.disbaled {
						.calendar-day {
							.num {
								color: #fff;
							}
						}
						.calendar-award-icon {
							-webkit-filter: grayscale(100%);
							filter: grayscale(100%);
						}
						.calendar-award-num {
							color: #fff;
						}
					}

					&:not(:nth-of-type(4n + 1)) {
						margin-left: 4rpx;
					}

					&:nth-of-type(4n+1) {
						margin-left: 8rpx;
					}

					.active {
						width: 134rpx;
						height: 169rpx;
						.num {
							color: #C03703;
						}
					}

					.calendar-day {
						left: 0;
						top: 4rpx;
						width: 100%;
						height: 30rpx;
						font-size: 22rpx;

						.num {
							font-weight: bold;
							font-size: 28rpx;
							color: #FFFFFF;
						}
						&.now-day {
							.num {
								color: #FFFFFF;
							}
						}
					}

					.calendar-award-icon {
						left: 0;
						right: 0;
						top: 48rpx;
						margin: auto;
						width: 100rpx;
						height: 80rpx;

						.img {
							max-width: 100rpx;
							height: 56rpx;
						}
					}

					.calendar-award-num {
						left: 0;
						top: 120rpx;
						width: 100%;
						font-weight: bold;
						line-height: 32rpx;
						color: #63FFF7;
					}
				}
			}
		}

		.calendar-signin-btn {
			width: 100%;
			height: 172rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			top: -50rpx;
			.signin-btn-footer {
				height: 172rpx;
				padding: 0 20rpx;

				.signin-btn-footer-left {
					
				}

				.signin-btn-footer-right {
					width: 243rpx;
					height: 80rpx;
					
					color: #fff;
				}
			}
		}
	}

	.award-box {
		width: 670rpx;
		height: 437rpx;
		// padding: 0 26rpx;
		// overflow: hidden;
	}

	.award-img {
		width: 558rpx;
		left: 0;
		right: 0;
		top: 150rpx;
		margin: auto;
		overflow-x: auto;

		.award-img-item+.award-img-item {
			margin-left: 18rpx;
		}

		.award-img-img {
			width: 164rpx;
			height: 162rpx;

			.img {
				height: 80rpx;
				overflow: hidden;
			}
		}

		.award-img-text {
			width: 456rpx;
			height: 80rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
			font-size: 32rpx;
		}
		
		.num {
			font-weight: bold;
			// font-size: 18rpx;
			font-size: 32rpx;
		}
		
	}

	.award-preview-box {
		width: 558rpx;
		height: 452rpx;

		.award-preview-bg {
			width: 100%;
			height: 452rpx;
		}
	}
	
	.award-preview-btn {
		left: 0;
		right: 0;
		bottom: -100rpx;
		margin: auto;
		width: 168rpx;
		height: 68rpx;
	}
</style>